@import '../config/import';

.crayons-dropdown {
  position: absolute;
  top: 100%;
  display: none; // initially hidden
  padding: var(--su-2);
  min-width: 250px;
  margin-top: var(--su-1);
  z-index: var(--z-dropdown);
  background: var(--card-bg);
  color: var(--card-color);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius);

  @media (min-width: $breakpoint-s) {
    max-width: 360px;
    width: max-content;
  }

  &.reverse {
    // Flips the dropdown to drop-upwards when set
    bottom: 100%;
    top: unset;
    margin-top: unset;
    margin-bottom: var(--su-1);
  }
}
